<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div id="home">
    <v-header
      activeClass="3"
      :tcxs="tcxs"
      v-on:childByValue="childByValue"
    ></v-header>
    <div data-v-3af161fe="" class="box">
      <div data-v-d61a05fa="" data-v-3af161fe="" class="router-view">
        <div data-v-d61a05fa="" class="tab-loading" style="display: none;">
          <div data-v-12de4ad8="" data-v-d61a05fa="">
            <span data-v-12de4ad8="" class="loading"></span>
          </div>
        </div>
        <div data-v-d61a05fa="">
          <div data-v-d61a05fa="" class="tab">
            <div>
              <div style="width: 100%;">
                <div class="el-row">
                  <div class="el-col el-col-24" style="height: 42px;"></div>
                </div>
                <div class="el-row">
                  <div class="el-col el-col-12">
                    <div class="">
                      <span class="title-l"
                        ><span
                          :class="tabs == 1 ? 'textRowClicked' : 'textRow'"
                          @click="tab(1)"
                          >今日排行</span
                        ></span
                      >
                      <span class="title-l"
                        ><span
                          :class="tabs == 2 ? 'textRowClicked' : 'textRow'"
                          @click="tab(2)"
                          >本周热门</span
                        ></span
                      >
                      <span class="title-l"
                        ><span
                          :class="tabs == 3 ? 'textRowClicked' : 'textRow'"
                          @click="tab(3)"
                          >最近更新</span
                        ></span
                      >
                    </div>
                  </div>
                </div>
                <div class="el-row">
                  <div
                    class="el-col el-col-24"
                    style="height: 15px; margin-bottom: 26px;"
                  ></div>
                </div>
              </div>
            </div>
          </div>

          <div data-v-27bcfb94="" data-v-d61a05fa="" style="min-height:600px">
            <div data-v-27bcfb94="" class="tem" v-if="category.length > 0">
              <div
                data-v-6ee7de1b=""
                data-v-27bcfb94=""
                class="tem tem-l"
                v-for="(item, index) in category"
                :key="item.id"
              >
                <router-link :to="{ name: 'Detail', query: { id: item.id } }"
                  ><img :src="item.cover" width="72" height="72" class="img"
                /></router-link>
                <span data-v-6ee7de1b="">{{ index + 1 }}</span>
                <div data-v-6ee7de1b="" class="intro">
                  <div data-v-6ee7de1b="" class="intro_left">
                    <router-link
                      :to="{ name: 'Detail', query: { id: item.id } }"
                      ><p data-v-6ee7de1b="" class="">
                        {{ item.name }}
                      </p></router-link
                    >
                    <span data-v-6ee7de1b="">
                      <div data-v-f8fa9bf8="" class="newStarBox">
                        <span class="star stargrey">
                          <span
                            class="star starlight"
                            :style="{
                              width:
                                item.star == 0
                                  ? '0%'
                                  : '' || item.star == 1
                                  ? '17.348248862%'
                                  : '' || item.star == 2
                                  ? '37.348248862%'
                                  : '' || item.star == 3
                                  ? '57.348248862%'
                                  : '' || item.star == 4
                                  ? '77.348248862%'
                                  : '' || item.star == 5
                                  ? '100%'
                                  : ''
                            }"
                          ></span>
                        </span>
                      </div>
                      <span data-v-6ee7de1b="" class="">{{
                        item.categoryName
                      }}</span>
                    </span>
                    <p data-v-6ee7de1b="" class="">{{ item.subtitle }}</p>
                  </div>
                  <div data-v-6ee7de1b="" class="intro_right">
                    <button
                      data-v-6ee7de1b=""
                      class="hwtext_65st"
                      style="cursor: pointer;"
                      @click="download(item.id)"
                    >
                      安装
                    </button>
                  </div>
                </div>
                <hr data-v-6ee7de1b="" />
                <div
                  data-v-585dc428=""
                  data-v-6ee7de1b=""
                  style="display: none;"
                >
                  <div data-v-585dc428="" class="InstallPopup">
                    <div data-v-585dc428="" class="tab-loading">
                      <div data-v-12de4ad8="" data-v-585dc428="">
                        <span data-v-12de4ad8="" class="loading"></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  data-v-6ee7de1b=""
                  class="mask"
                  style="display: none;"
                ></div>
              </div>

              <div data-v-27bcfb94="" class="sign" style="width: 512px;"></div>
            </div>

            <div
              data-v-7b357eef=""
              data-v-1b6e0b1f=""
              class="search_null"
              i="0"
              big="true"
              v-if="category.length == 0"
            >
              <img
                data-v-7b357eef=""
                src=""
                alt="Search Result Empty"
              />
              <p data-v-7b357eef="">没有符合条件的内容</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
//引入底部头部组件
import Header from "../common/Header.vue";
import Footer from "../common/Footer.vue";
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      tabs: 1,
      tcxs: false,
      category: []
    };
  },
  mounted() {
    this.requestData(this.tabs);
  },
  methods: {
    // 下载
    childByValue: function(childValue) {
      this.tcxs = childValue;
    },
    tab(e) {
      console.log(e);
      this.tabs = e;
      this.requestData(this.tabs);
    },
    requestData(aid) {
      var aurl = "";
      if (aid == 1) {
        aurl = `/api/appstore/rank/todayTop`;
      }
      if (aid == 2) {
        aurl = `/api/appstore/rank/weekTop`;
      }
      if (aid == 3) {
        aurl = `/api/appstore/rank/updateTop`;
      }
      var data = {
        // "a":"getPortalArticle",
        // "aid":aid,
      };
      this.$http({
        url: aurl,
        method: "post",
        headers: {
          // "Authentication":this.utoken,
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(data)
      })
        .then(res => {
          console.log("申请：", res);
          if (res.data.code == "1") {
            this.category = res.data.datas;
            console.log("sjjj:", this.category);
          } else {
            this.formmsg = res.data.msg;
          }
          console.log("lllist", this.category);
        })
        .catch(function(error) {
          console.log("1111申请：", error);
        });
    }
  },

  components: {
    "v-header": Header,
    "v-footer": Footer
  }
};
</script>

<style lang="css" scoped>
/* css 局部作用域 scoped*/
h2 {
  color: red;
}
</style>
